<template>
    <!--    友人互动-->
    <div>
        <div class="middle">
            <el-card>
                <!--                顶部-->
                <div class="top" style="padding-bottom: 10px;border-bottom: 1px solid #eee">
                    <h2 style="text-align: center;">友人帐</h2>
                </div>

                <!--                友链部分-->
                <div class="youlian">


                    <div class="color01" v-for="(item,index) in linkList"
                         style="width:210px;border-radius: 5px;height: 150px;margin-top: 8px">
                        <a class="guodu" :href="item.linkA"
                           style="text-align: center;display: flex;flex-direction: column;justify-content: space-between;align-items: center">
                            <img :src="item.linkAvatar"
                                 style="width: 70px;height: 70px;border-radius: 35px" alt="">
                            <div class="name" style="margin-top: 10px">{{item.linkName}}</div>
                            <div class="description" style="margin-top: 10px">{{item.linkDescription}}~</div>
                        </a>
                    </div>

                    <!--                    https://cdn.innei.ren/avatar.png-->


                </div>
                <!--                段-->
                <div class="segment">
                    <p style="margin-top: 20px">欢迎交换友链，请评论你的站点信息，例如：</p>
                    <ul style="margin-top: 15px">
                        <li>昵称：bilibili弹幕网</li>
                        <li>简介：同性交友</li>
                        <li>网址：<a style="color: #00B5AD" href="#">https://www.bilibili.com</a>/</li>
                        <li>头像URL：<a style="color: #00B5AD" href="#">https://www.bilibili.com/favicon.ico</a></li>
                    </ul>
                </div>
                <!--                发表评论模块-->
                <div style="margin-top: 20px">
                    <el-form :model="formComment" :rules="rules" ref="formRef" class="demo-ruleForm">
                        <el-form-item prop="content">
                            <el-input maxlength="200"
                                      show-word-limit type="textarea" placeholder="友善评论"
                                      v-model="formComment.content"></el-input>
                        </el-form-item>
                        <el-button type="primary" @click="submitComment('formRef')">发表评论</el-button>
                        <el-button type="success" v-if="flag===true" @click="clearAddParent">取消回复</el-button>

                    </el-form>
                </div>
                <!--                发表评论模块-->

                <!--                评论回复模块-->
                <div style="margin-top: 20px">
                    <!--                        顶部-->
                    <div style="border-bottom: 1px solid #eee;font-size: 18px;font-weight: 400;padding-bottom: 5px"
                         class="header">Comments | {{count}} 条评论
                    </div>
                    <!--                   一个评论-->
                    <div class="comment" v-for="(item,index) in commentList" style="">
                        <!--                   父 评论    -->
                        <div :class="[item.commentLevel===1?'level1':'level2']" style="">
                            <div class="content" style="display: flex">
                                <el-image
                                        style="width: 40px; height: 40px;border-radius: 20px"
                                        :src="item.avatar"
                                        :preview-src-list="[item.avatar]"
                                ></el-image>
                                <div class="right" style="display: flex;flex-direction: column;margin-left: 10px">
                                    <div>
                                        <a href="#" style="text-decoration: none"><span
                                                style="font-size: 16px;color: #303133;font-weight: 400">{{item.userName}}</span></a>
                                        <span style="margin-left: 5px;font-size: 14px;font-weight: 400;color: #9999AD">{{item.formatTime}}</span>
                                        <el-tag style="margin-left: 5px" type="mini" effect="dark"
                                                @click="addParent(item.id,item.userId,item.userName)">回复
                                        </el-tag>
                                        <el-tag v-if="item.deleteflag===1" style="margin-left: 5px" size="mini"
                                                type="danger" effect="dark"
                                                @click="deleteComment(item.id)">删除
                                        </el-tag>
                                    </div>
                                    <p v-html="item.content" style="margin-top: 5px"></p>

                                </div>
                            </div>
                        </div>
                        <!--                        父评论-->
                        <!--                        子评论-->
                        <!--                    <div class="comments level2" style="">-->
                        <!--                        <div class="content" style="display: flex">-->
                        <!--                            <img style="width: 40px;height: 40px;border-radius: 20px"-->
                        <!--                                 src="../assets/avatar.jpg" alt="">-->
                        <!--                            <div class="right" style="display: flex;flex-direction: column;margin-left: 10px">-->
                        <!--                                <div>-->
                        <!--                                    <a href="#" style="text-decoration: none"><span-->
                        <!--                                            style="font-size: 16px;color: #303133;font-weight: 400">许嵩</span></a>-->
                        <!--                                    <span style="margin-left: 5px;font-size: 14px;font-weight: 400;color: #9999AD">2021-09-23 09:17</span>-->
                        <!--                                    <el-tag style="margin-left: 5px;cursor: pointer!important;" type="mini"-->
                        <!--                                            effect="dark">回复-->
                        <!--                                    </el-tag>-->
                        <!--                                </div>-->
                        <!--                                <p style="margin-top: 5px">详细属性自己设置 </p>-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                        <!--                    </div>-->
                        <!--                        子评论-->

                    </div>
                    <!--                        一个评论-->


                </div>
                <!--                评论回复模块结束-->

            </el-card>
        </div>
    </div>
</template>

<script>
    // import Global from "../assets/js/Global";
    import jwtDecode from "jwt-decode";
    import Global from "../../public/static/Global";

    export default {
        name: "Interaction",

        methods: {
            async getLinkInfo() {
                const {data: res} = await this.$http.get('link')
                for (let i = 0; i < res.data.length; i++) {
                    // 图片路径的拼接
                    res.data[i].linkAvatar = Global.baseUrl + res.data[i].linkAvatar;
                    // console.log(res.data[i].createTime);
                }
                this.linkList = res.data;
                console.log(res);
            }, async submitComment(formRef) { // 提交评论
                // le= localStorage.getItem('token')
                const token = localStorage.getItem('token')
                if (!token) {
                    this.$message.error('请先登录');
                    return;
                }
                const obj = jwtDecode(token)
                this.formComment.userName = obj.nickname;
                this.formComment.userId = obj.id;
                this.formComment.blogId = 10000000  // 博客的id 但这是互动 里的评论，给一个固定值，10000000
                // this.formComment.blogTitle = this.blog.title  // 父级信息通过回复按钮在其他方法添加
                // console.log(obj)  // 如果是一级评论就不需要设计父级，由后端判断是否有父级插入一级
                let _this = this
                this.$refs[formRef].validate(async (valid) => { // 前端校验
                        if (valid) {
                            const {data: res} = await this.$http.post('comment', this.formComment)
                            console.log(res);
                            if (res.meta.status === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功'
                                })
                                this.getCommentInfo();
                                // _this.getBlogDetail(_this.formComment.blogId) // 刷新评论
                                // this.$router.go(0)
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.meta.msg
                                })
                            }

                        } else {
                            this.$message({
                                type: 'error',
                                message: '请检查！'
                            })
                            return false;
                        }
                    }
                );


                this.$refs[formRef].resetFields();

                // console.log(res);
            },
            async getCommentInfo() {  // 获取评论的信息
                const token = localStorage.getItem('token')
                let loginUserId
                let obj
                if (token) {  // 登录了才解析
                    obj = jwtDecode(token)

                    loginUserId = obj.id;  // 当前登录的用户id
                }

                let blogId = this.$route.query.id  // 博客的id
                const {data: res} = await this.$http.get('/comment/' + 10000000)// 通过博客id查询对应的评论
                let avatarImg;
                for (let i = 0; i < res.data.length; i++) {  // 取出对应评论的用户id，去查用户的头像
                    const {data: res1} = await this.$http.get('/comment/avatar/' + res.data[i].userId)
                    res.data[i]['avatar'] = Global.baseUrl + res1.data; // push commentList数组
                    // this.getAvatarByUserId();
                    // console.log(res1.data);
                }
                for (let i = 0; i < res.data.length; i++) {  // 取出对应评论的用户id，去查用户的头像
                    if (res.data[i].userId === loginUserId) {
                        res.data[i]['deleteflag'] = 1;  // 显示删除按钮
                    }
                    const {data: res1} = await this.$http.get('/comment/avatar/' + res.data[i].userId)
                    res.data[i]['avatar'] = Global.baseUrl + res1.data; // push commentList数组
                    // this.getAvatarByUserId();
                    // console.log(res1.data);
                }
                this.commentList = res.data
                console.log(this.commentList)

                // console.log(res);
            },
            getAvatarByUserId(id) { // 通过用户获取头像
                // console.log(res.data.data)

                // let img=    res.data
                // console.log(res)
                // return 1;
            },
            addParent(parentCommentId, parentCommentUserId, userName) {  // 回复评论，添加父级信息
                console.log(parentCommentId)
                console.log(parentCommentUserId);
                console.log(userName);
                this.flag = true;
                this.$message.success('回复' + userName + '请转至输入框');
                // this.formComment.content = '@' + userName + ':';
                this.formComment.parentCommentId = parentCommentId;
                this.formComment.parentCommentUserId = parentCommentUserId;
                this.formComment.userName = userName;
            },
            clearAddParent() {  // 清除父级信息
                this.flag = false;
                this.$message.error('取消了回复')
                this.formComment.parentCommentId = null
                this.formComment.parentCommentUserId = null
                this.formComment.userName = null;
            },
            async getCommentCount() {
                // this.$message.
                const {data: res} = await this.$http.get('/comment/count/' + 10000000)// 通过博客id查询对应的评论总数
                console.log(res)
                this.count = res.data
            }, async deleteComment(id) { // 前台删除评论
                const token = localStorage.getItem('token')
                const obj = jwtDecode(token)
                let blogId = this.$route.query.id  // 博客的id

                let loginUserId = obj.id;  // 登录的用户id
                const {data: res} = await this.$http.delete('/comment/' + id + '/' + loginUserId)// 通过博客id插入
                if (res.meta.status === 200) {
                    this.$message.success('删除评论成功')
                    this.getCommentInfo();
                } else {
                    this.$message.error('删除评论失败')

                }

            }
        },
        data() {
            return {
                flag: false, // 表示添加 父级信息时候的 取消回复组件

                form: {
                    content: ''
                },
                formComment: {  // 评论表单
                    userName: "",
                    userId: "",
                    blogId: "",
                    blogTitle: "",
                    content: "",
                    commentLevel: "",
                    parentCommentId: "",
                    parentCommentUserId: ""
                }, // 评论表单
                linkList: [],  // 友链数据
                commentList: [],  // 评论集合
                count: 0,// 评论总数
                rules: {
                    content: [
                        {required: true, message: '请输入评论', trigger: 'blur'},
                        {min: 3, max: 50, message: '长度在 3 到 20 个字符', trigger: 'blur'}
                    ],
                }
            }
        }, created() {
            this.getLinkInfo()
            // this.getBlogDetail()
            this.getCommentInfo();
            this.getCommentCount();
        },
    }
</script>

<style lang="less" scoped>
    .middle {
        width: 733px;
        background-color: pink;
        margin: 0 auto;
    }

    .youlian {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        border-bottom: 1px solid #40A1FF;
        padding-bottom: 5px;

        img {
            transition: all 1s;

        }

        a {
            text-decoration: none;
            color: #ffffff;
        }

        a:hover img {
            transform: scale(1.2);

            /*transform: rotate(360deg);*/

        }
    }

    .description {
        width: 100px;
    }

    .color01 {
        background-color: #9980FA;
    }

    .color02 {
        background-color: #9B59B6;
    }

    .color03 {
        background-color: #EE5A24;
    }

    .color04 {
        background-color: #F1C40F;
    }

    .segment {
        overflow: hidden;
        line-height: 25px;
        height: 200px;
        border-bottom: 1px solid #40A1FF;
    }

    .level1 {
        margin-left: 10px;
        margin-top: 11px
    }

    .level2 {
        margin: 35px 0 5px 35px
    }
</style>